import type { ProTableProps } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import type { ParamsType } from '@ant-design/pro-provider';
import type { ModalProps as AntdModalProps } from 'antd';
import { Modal, Table } from 'antd';
import type { TableRowSelection } from 'antd/es/table/interface';
import { useEffect, useMemo, useState } from 'react';

export interface Props<DataType extends Record<string, any>, Params extends ParamsType = ParamsType>
  extends ProTableProps<DataType, Params> {
  selectedRows?: DataType[];
  onChangeSelect?: TableRowSelection<DataType>['onChange'];
}
export interface ModalProps<
  DataType extends Record<string, any>,
  Params extends ParamsType = ParamsType,
> extends AntdModalProps {
  /** 可否重复选择 */
  isCanRepeatSelection?: boolean;
  selectedRows?: DataType[];
  selectionTableProps: ProTableProps<DataType, Params>;
  onConfirm: (selectedRows: DataType[]) => void;
}

/** 可选择表格 */
function ProSelectionTable<
  DataType extends Record<string, any>,
  Params extends ParamsType = ParamsType,
>(props: Props<DataType, Params>) {
  const { selectedRows, onChangeSelect, ...restProps } = props;
  const selectedRowKeys = useMemo(() => {
    if (props.rowKey && selectedRows && selectedRows.length) {
      return selectedRows.map((item) => item[props.rowKey as string]);
    } else {
      return [];
    }
  }, [selectedRows, props.rowKey]);
  return (
    <ProTable
      {...restProps}
      options={false}
      search={false}
      tableAlertRender={false}
      rowSelection={{
        ...restProps.rowSelection,
        selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        selectedRowKeys: selectedRowKeys,

        onChange: onChangeSelect,
      }}
    />
  );
}

/** 可选择表格弹窗 */
export function ProSelectTableModal<
  DataType extends Record<string, any>,
  Params extends ParamsType = ParamsType,
>(props: ModalProps<DataType, Params>) {
  const { isCanRepeatSelection, selectedRows, selectionTableProps, onConfirm, ...restProps } =
    props;
  /** 已添加选择的行数据keys */
  const selectedRowKeys = useMemo(() => {
    if (selectionTableProps.rowKey && selectedRows && selectedRows.length) {
      return selectedRows.map((item) => item[selectionTableProps.rowKey as string]);
    } else {
      return [];
    }
  }, [selectedRows, selectionTableProps.rowKey]);

  const [selectedTableRows, setSelectedTableRows] = useState<DataType[]>([]);

  useEffect(() => {
    if (restProps.open && selectedRows?.length) {
      setSelectedTableRows(selectedRows);
    } else {
      setSelectedTableRows([]);
    }
  }, [restProps.open, selectedRows]);

  return (
    <Modal {...restProps} onOk={() => onConfirm(selectedTableRows)}>
      <ProSelectionTable
        {...selectionTableProps}
        rowSelection={{
          ...selectionTableProps.rowSelection,
          getCheckboxProps: (record) => {
            return {
              disabled:
                !isCanRepeatSelection &&
                selectedRowKeys.includes(record[selectionTableProps.rowKey as string]),
            };
          },
        }}
        selectedRows={selectedTableRows}
        onChangeSelect={(_, selectedRows) => {
          setSelectedTableRows(selectedRows);
        }}
      />
    </Modal>
  );
}

export default ProSelectionTable;
